import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';


export default class GuarantePriceBox extends Component {

    render() {
        const {quotationData} = this.props
        return (
            <View style={styles.container}>
                <View style={styles.infoBox}>
                    <Text style={styles.itemTitleText}>保证金</Text>
                    <Text style={styles.itemTitleText}>{'从保证金账户冻结，交易完成后解冻'}</Text>
                </View>
                <View style={styles.infoBox}>
                    <Text style={styles.itemTitleText}>信用担保</Text>
                    <Text style={styles.itemPriceText}>{'¥'+this.formatPrice(quotationData.contractDeposit)}</Text>
                </View>
                <View style={styles.infoBox}>
                    <Text style={styles.itemTitleText}>价值担保</Text>
                    <Text style={styles.itemPriceText}>{'¥'+this.formatPrice(quotationData.carDeposit)}</Text>
                </View>
            </View>
        )
    }

    formatPrice(price) {
        if (!price || isNaN(price)) return '';
        return (price / 100).toString();
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        width: '100%',
        flexDirection: 'column',
        backgroundColor: '#fff',
        borderRadius: 6,
        paddingHorizontal: 16,
    },
    titleText: {
        marginBottom: 12,
        fontSize: 14,
        fontWeight: '500',
        color: '#333333'
    },
    infoBox: {
        height: 46,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    itemTitleText: {
        color: '#333',
        fontSize: 14,
    },
    itemPriceText: {
        fontSize: 14,
        fontWeight: '500',
        color: '#333'
    }
    
})